<template>
  <div>
    <button @click="isShow = !isShow"> 切换：显示/隐藏</button>
    <transition >
      <h2 v-show="isShow">这是Vue封装的过渡效果</h2>
    </transition>

  </div>

</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    }
  },
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
h2 {
  background-color: skyblue;
  width: 300px;
  transition:1s linear;
}

/* 离开的终点也是进入的起点 */
.v-leave-to,.v-enter {
 transform:translateX(-200px);
}
/* 离开的起点也是进入的终点 */
.v-leave,v-enter-to {
  transform:translateX(0px);
  }
</style>

